<template>
  <canvas ref="canvas" class="canvas"></canvas>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { ref, provide, onMounted } from "vue";

const canvas = ref(null);
const scene = new THREE.Scene();
//1. 长方体形状
const geometry = new THREE.BoxGeometry(100, 100, 100);
//2. 长方体材质
const material = new THREE.MeshBasicMaterial({
  color: 0x0000ff,
  transparent: true, //开启透明
  opacity: 0.5,
  side: THREE.DoubleSide, //两面可见
  wireframe:true
});
const axesHelper = new THREE.AxesHelper(150);
//3. 长方体网格模型Mesh
const mesh = new THREE.Mesh(geometry, material);
//4. 长方体添加到虚拟场景中
scene.add(mesh);
scene.add(axesHelper);
console.log(mesh);
console.log(scene);
let renderer = null;
const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(90, width / height, 1, 2000);

camera.position.set(200, 200, 200);
camera.lookAt(mesh.position);

// const ambient = new THREE.AmbientLight(0xffffff, 1);
const pointLight = new THREE.PointLight(0xffffff, 1.0);
// scene.add(ambient);
pointLight.position.set(200, 200, 200);//点光源放在x轴上
scene.add(pointLight);

const resetRenderer = () => {
  console.log(9988);
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.render(scene, camera); //执行渲染操作
};

onMounted(() => {
  window.addEventListener("resize", resetRenderer);
  console.log("canvas", canvas);
  renderer = new THREE.WebGLRenderer({
    canvas: canvas.value,
    antialias: true,
  });
  renderer.setClearColor(0x999999);

  renderer.setSize(width, height);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.render(scene, camera); //执行渲染操作
  const controls = new OrbitControls(camera, renderer.domElement);
  // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
  controls.addEventListener("change", function () {
    renderer.render(scene, camera); //执行渲染操作
  }); //监听鼠标、键盘事件

  const clock = new THREE.Clock();
  function render() {
    const spt = clock.getDelta() * 1000; //毫秒
    console.log("两帧渲染时间间隔(毫秒)", spt);
    console.log("帧率FPS", 1000 / spt);
    renderer.render(scene, camera); //执行渲染操作
    mesh.rotateY(0.01); //每次绕y轴旋转0.01弧度
    requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
  }
  // render();
  const geometry2 = new THREE.BufferGeometry();
  const vertices = new Float32Array([
    0,
    0,
    0, //顶点1坐标
    50,
    0,
    0, //顶点2坐标
    0,
    100,
    0, //顶点3坐标
    0,
    0,
    10, //顶点4坐标
    0,
    0,
    100, //顶点5坐标
    50,
    0,
    10, //顶点6坐标
  ]);
  const attribue = new THREE.BufferAttribute(vertices, 3);
  geometry2.attributes.position = attribue;
  const material2 = new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10.0, //点对象像素尺寸
  });
  const mesh2 = new THREE.Mesh(geometry2, material);
  const points = new THREE.Points(geometry2, material2); //点模型对象

  // 线材质对象
const material3 = new THREE.LineBasicMaterial({
    color: 0xff0000, //线条颜色
    side: THREE.DoubleSide, //两面可见
    wireframe:true
}); 
// 创建线模型对象
// LineLoop,Line,LineSegments
const line = new THREE.LineSegments(geometry2, material3);
const geometry3 = new THREE.BufferGeometry();
const vertices2 = new Float32Array([
    0, 0, 0, //顶点1坐标
    80, 0, 0, //顶点2坐标
    80, 80, 0, //顶点3坐标
    0, 80, 0, //顶点4坐标
]);
// Uint16Array类型数组创建顶点索引数据
const indexes = new Uint16Array([
    // 下面索引值对应顶点位置数据中的顶点坐标
    0, 1, 2, 0, 2, 3,
])
const material4 = new THREE.MeshLambertMaterial({
    color: 0xffff00, //线条颜色
    side: THREE.DoubleSide, //两面可见
 
}); 
geometry3.attributes.position = new THREE.BufferAttribute(vertices2, 3);;
geometry3.index = new THREE.BufferAttribute(indexes, 1); //1个为一组

const normals = new Float32Array([
    0, 1, 0, //顶点1法线( 法向量 )
    0, 0, 1, //顶点2法线
    0, 0, 1, //顶点3法线
    0, 0, 1, //顶点4法线
]);
// 设置几何体的顶点法线属性.attributes.normal
geometry3.attributes.normal = new THREE.BufferAttribute(normals, 3);
const mesh3 = new THREE.Mesh(geometry3, material4);
console.log('mesh3', mesh3)
  scene.add(mesh2);
  scene.add(points);
  scene.add(line);
  scene.add(mesh3);
  mesh2.position.set(200, 200, 200);
  points.position.set(-200, -200, -200);
  line.position.set(200, -200, 200);
  mesh3.position.set(200, 200, -200);
  renderer.render(scene, camera);
});
</script>

<style scoped>
.canvas {
  width: 100%;
  height: 100%;
}
</style>
